(Today btw, is 9-9-09 .. for all you numerologists.) Anybody who has ever used Cascading Style Sheets (CSS) to style a web page has likely experienced the frustration that comes when a particular style refuses to render the way you want.
Understanding the concepts outlined here will help troubleshoot any CSS rendering problem .. much better than banging your head against the wall (.. a technique that seems to provide limited success).
Three rendering principles determine how CSS styles are applied to a web page, and which style(s) take precedence. They are:
- The Cascade
- Inheritance
- Specificity
For reference sake, here's a quick review of basic CSS syntax » selector {property: value}
For example » p {color: green}
.. will apply a value of 'green' to the color property for the text contained in a paragraph ('p' = paragraph selector). This is called a CSS "rule".
Here's a brief overview of the 3 rendering principles listed above that determine how CSS rules are applied to a web page:
I. THE CASCADE
Styles are applied in the following "cascading" order: External style sheet » Embedded styles » Inline styles.
A given HTML page can contain one, two, or all three (or none). Styles lower down the cascade normally supplement (add to) styles higher up the cascade. If a styling conflict exists however, styles lower down take precedence.
In other words, the last style applied wins (.. given equal specificity). Here's a brief description of each type of cascading style mentioned above.
1. External style sheets (fileName.css).
These styles can be applied to an unlimited number of HTML pages .. which link to the CSS file. Very powerful, since they allow you to change the look-n-feel of an entire site by modifying a single file. Web pages normally link to only a single external style sheet, tho it's possible to link to multiple external style sheets .. which also cascade, depending on the order they're listed. Large professional sites often use multiple external style sheets.
2. Embedded styles
They are found within the head tag of an HTML page. These styles are enclosed within the 'style' tag <style> and apply only to the HTML page in which they are found. These styles supercede any styles contained within an external style sheet that may conflict with them (.. given equal specificity).
3. Inline styles
Inline styles are applied to individual HTML elements/tags, using the "style" ATTRIBUTE. Note that this is not the same as the style ELEMENT applied to embedded styles mentioned above, tho it's spelled the same way. Inline styles supercede all others that conflict with them .. since the last style applied wins. Plus, they carry maximum specificity (which we'll discuss later).